import React from 'react';
import { Progress } from 'antd';
import _ from 'lodash';
import styles from './index.less';

const rends = [
  { title: '电量', unit: 'MWh' },
  { title: '电价', unit: '元/MWh' },
  { title: '收入', unit: '万元' },
];

export default ({ data }) => {
  const fmtNum = (v) => {
    if (!v) return 0;
    return Math.round(v).toFixed(2);
  };

  /** render */
  const _renderRate = ({ label, value, color }) => {
    let rateVal = !!value ? Math.round(value * 100) : 0;
    return (
      <div className={styles.per_item}>
        <Progress
          type="circle"
          width={48}
          strokeColor={color}
          trailColor={'rgba(255, 255, 255, 0.26)'}
          percent={rateVal}
          format={() => label}
        />
        <div className={styles.rate}>
          <div className={styles.lab}>完成率</div>
          <div className={styles.val}>{rateVal}%</div>
        </div>
      </div>
    );
  };
  return (
    <div className={styles.total}>
      {rends.map(({ title, unit }) => {
        const itemData = data?.[title];
        return (
          <div key={title}>
            <div>
              <div className={styles.title}>{title}</div>
              <div className={styles.value}>
                {fmtNum(itemData?.currentValue)}
                <div className={styles.unit}>{unit}</div>
              </div>
              <div className={styles.pers}>
                {_renderRate({
                  label: '年度',
                  value: itemData?.yearCompleteRate,
                  color: '#18A0FB',
                })}
                {_renderRate({
                  label: '月度',
                  value: itemData?.monthCompleteRate,
                  color: '#30D485',
                })}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
